<template>
  <div class="fan-video">
    <div class="top-header">
      <NavView />
      <!-- 主轮播图 -->
      <el-carousel
        ref="mainCarousel"
        height="400px"
        indicator-position="none"
        :autoplay="false"
        @change="handleCarouselChange"
      >
        <el-carousel-item v-for="(item, index) in images" :key="index">
          <img :src="item.url" class="carousel-image" :alt="'banner-' + index">
        </el-carousel-item>
      </el-carousel>

      <!-- 缩略图预览 -->
      <div class="thumbnail-container">
        <div
          v-for="(item, index) in images"
          :key="'thumb-'+index"
          class="thumbnail-item"
          :class="{ 'active': activeIndex === index }"
          @mouseenter="handleThumbnailHover(index)"
          @click="handleThumbnailClick(index)"
        >
          <img
            :src="item.url"
            class="thumbnail-image"
            :alt="'thumbnail-'+index"
          />
          <div class="thumbnail-overlay"></div>
          <div class="border-flow"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import NavView from '../../home/components/NavView.vue'

// 导入图片
import img1 from '@/assets/imgs/fan_video/img1.png'
import img2 from '@/assets/imgs/fan_video/img2.png'
import img3 from '@/assets/imgs/fan_video/img3.png'
import img4 from '@/assets/imgs/fan_video/img4.png'
import img5 from '@/assets/imgs/fan_video/img5.png'
import img6 from '@/assets/imgs/fan_video/img6.png'

const images = ref([
  { url: img1 },
  { url: img2 },
  { url: img3 },
  { url: img4 },
  { url: img5 },
  { url: img6 }
])

const mainCarousel = ref(null)
const activeIndex = ref(0)
let animationInterval
let flowInterval

// 处理轮播图切换
const handleCarouselChange = (index) => {
  activeIndex.value = index
}

// 处理缩略图悬停
const handleThumbnailHover = (index) => {
  activeIndex.value = index
  mainCarousel.value?.setActiveItem(index)
}

// 处理缩略图点击
const handleThumbnailClick = (index) => {
  activeIndex.value = index
  mainCarousel.value?.setActiveItem(index)
}

// 启动边框流动动画
const startFlowAnimation = () => {
  // 清除现有动画
  const elements = document.querySelectorAll('.border-flow')
  elements.forEach(el => {
    el.style.animation = 'none'
    el.offsetHeight // 触发重绘
    el.style.animation = null
  })
}

// 自动切换缩略图
const startAutoSwitch = () => {
  animationInterval = setInterval(() => {
    const nextIndex = (activeIndex.value + 1) % images.value.length
    handleCarouselChange(nextIndex)
    mainCarousel.value?.setActiveItem(nextIndex)
    startFlowAnimation()
  }, 3000) // 3秒切换一次
}

onMounted(() => {
  startAutoSwitch()
})

onUnmounted(() => {
  clearInterval(animationInterval)
  clearInterval(flowInterval)
})
</script>

<style lang="scss" scoped>
.fan-video {
  .top-header {
    width: 100%;
    position: relative;

    .el-carousel {
      height: 400px;
      margin-bottom: 20px;

      .carousel-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
      }
    }

    .thumbnail-container {
      display: flex;
      justify-content: center;
      gap: 10px;
      padding: 0 20px;
      margin-top: -50px;
      position: relative;
      z-index: 10;

      .thumbnail-item {
        width: 80px;
        height: 60px;
        border-radius: 4px;
        overflow: hidden;
        cursor: pointer;
        position: relative;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

        &:hover {
          transform: scale(1.2);
          z-index: 2;
        }

        &.active {
          transform: scale(1.15);
          z-index: 1;
        }

        .thumbnail-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .thumbnail-overlay {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.3);
          transition: all 0.3s ease;
        }

        .border-flow {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 4px;
          overflow: hidden;

          &::before {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
              to bottom right,
              transparent, transparent,
              rgba(255, 255, 255, 0.8),
              transparent, transparent
            );
            transform: rotate(45deg);
            animation: borderFlow 3s linear infinite;
          }
        }

        &:hover .thumbnail-overlay,
        &.active .thumbnail-overlay {
          background: rgba(0, 0, 0, 0.1);
        }
      }
    }
  }
}

/* 边框流动动画 */
@keyframes borderFlow {
  0% {
    transform: translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateY(100%) rotate(45deg);
  }
}

/* 缩放动画 */
@keyframes scaleUp {
  0% { transform: scale(1); }
  100% { transform: scale(1.2); }
}

.thumbnail-item:hover {
  animation: scaleUp 0.3s forwards;
}
</style>
